@tailwind base;

@layer base {
	*,
	::after,
	::before {
		text-rendering: optimizespeed;
		-webkit-font-smoothing: antialiased;
		-webkit-tap-highlight-color: transparent;
		backface-visibility: hidden;
	}

	html {
		font-family: 'Public Sans', sans-serif;
	}

	html,
	body {
		height: 100%;
	}

	body {
		height: 100%;
	}

	[data-theme='dark'] body::before {
		content: '';
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		/*
        background-image: url(/bg/grid-dark.svg), url(/bg/spotlights-dark.svg),
            linear-gradient(270deg, #1f1f1f 0%, #000000 100%);
            */
		/* No grid background by default */
		background-size: 0, cover, cover;
		background-blend-mode: color-dodge, lighten, multiply;
		z-index: -1;
	}

	[data-theme='light'] body::before {
		content: '';
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: url(/bg/grid-light.svg), url(/bg/spotlights-light.svg),
			linear-gradient(270deg, #e2e2e2 0%, #fff 100%);
		/* No grid background by default */
		background-size: 0, cover, cover;
		background-blend-mode: color-dodge, color, hard-light;
		z-index: -1;
	}

	@media (min-width: 768px) {
		[data-theme='dark'] body::before {
			background-size: 50px, cover, cover;
		}

		[data-theme='light'] body::before {
			background-size: 50px, cover, cover;
		}
	}
}
